<template>
  <div class="add">
    <div class="add-header">
      <button class="btn__back" @click="goBack">Cancel</button>
      <div class="header__content">Expense</div>
    </div>
    <div class="add-main">
      <span class="main-box">
        <span class="main__tips">$</span>
        <span class="main__content">{{ currentSum }}</span>
      </span>
    </div>

    <div class="add-foot">
      <div class="info">
        <label for="" class="note">
          <SvgIcon icon-class="note"></SvgIcon>
          <input type="text" placeholder="Choose Type" class="note__content" />
        </label>

        <div class="time" @click="openPopup">
          <span>{{ currentDate_show }}</span>
          <span>at</span>
          <span>10:08 AM</span>
        </div>
      </div>
      <div class="Keybord">
        <Keybord @input="onExpenceChange"></Keybord>
      </div>
    </div>
  </div>

  <div class="pop">
    <van-popup :show="show_pop" position="bottom">
      <van-datetime-picker
        class="picker"
        @cancel="closePopup"
        @confirm="currentDateConfire"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        visible-item-count="3"
      />
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import Keybord from "@/components/Keybord/index.vue";
import SvgIcon from "@/components/SvgIcon.vue";
import { useRouter, useRoute } from "vue-router";
import { ref, computed } from "vue";
const fillMonth: (month: number) => string = (month: number) => {
  if (month <= 9) {
    return "09";
  } else {
    return String(month);
  }
};
const DateFormat = (date: Date) => {
  return `${date.getFullYear()}-${fillMonth(
    date.getMonth() + 1
  )}-${date.getDate()}`;
};
const currentDate = ref(new Date());
const currentDate_show = computed(() => {
  if (DateFormat(currentDate.value) == DateFormat(new Date())) {
    return "Today";
  } else {
    return DateFormat(currentDate.value);
  }
});
const minDate = new Date(1900, 0, 1);
const maxDate = new Date(2080, 0, 1);
const show_pop = ref(false);
const closePopup = () => {
  show_pop.value = false;
};
const openPopup = () => {
  show_pop.value = true;
};
const currentDateConfire = (date: Date) => {
  show_pop.value = false;
  currentDate.value = date;
};

const currentSum = ref("0");
const onExpenceChange = (input: string) => {
  currentSum.value = input;
};

let router = useRouter();
const goBack = () => {
  router.go(-1);
};
</script>
<style lang="scss">
.flex {
  display: flex;
}
.add {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  background-color: white;
  height: 100%;
}
.add-header {
  position: relative;
  font-weight: bold;
  .btn__back {
    border: none;
    background-color: white;
    outline: none;
    position: absolute;
    padding: 1em 0.5em;
    font-weight: bold;
    color: rgb(100, 100, 100);
  }
  .header__content {
    text-align: center;
    padding: 1em 0;
  }
}

.add-main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  .main-box {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-bottom: rgb(100, 100, 100) solid 1px;
  }
  .main__tips {
    font-size: 2em;
    color: rgb(100, 100, 100);
  }
  .main__content {
    font-size: 3em;
  }
}

.add-foot {
  .info {
    margin: 0 4vw;
    display: flex;
    border-bottom: rgba(100, 100, 100, 0.5) 1px solid;
    padding-bottom: 1em;
    .note {
      display: flex;
      align-items: center;
    }
    .note__icon {
      width: 1.5em;
      height: 1.5em;
    }
    .note__content {
      width: 30vw;
      border: none;
      outline: none;
      margin-left: 2vw;
    }
    .time {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: relative;
      right: 1em;
      color: #8a8a8a;
      span {
        margin-left: 5px;
      }
      &::after {
        position: absolute;
        content: "";
        right: -1em;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 0px;
        height: 0px;
        border-top: 5px solid gray;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-bottom: 5px solid transparent;
      }
    }
  }
}

.picker .van-ellipsis {
  font-size: 1.25em;
}
.picker .van-picker__toolbar {
  margin-bottom: 5vw;
}
.picker {
  padding-bottom: 5vw;
}

.picker .van-picker__title,
.picker .van-haptics-feedback {
  font-size: 1em;
}
.picker .van-picker__confirm {
  color: #fc8739;
}
</style>
